<template>
    <div>
        <h1 style="text-align: center; font-size: 30px;">生产补料</h1>
    </div>
    <!-- 添加 -->
    <table border="1"
        style="border-collapse: collapse; width: 100%; height: 40px;margin-top: 30px;margin-bottom: 30px;">
        <tr>
            <td :colspan="8" style="height: 50px; font-size: 20px;">基本信息</td>
        </tr>
        <tr style="height: 70px;">
            <td style=" font-size: 17px;text-align: center">单据编号</td>
            <td style="text-align: center;"><input v-model="form.feNumber" :disabled="true" type="text"
                    style="height: 50px; width: 90%;text-align: center;" placeholder="保存后自动生成" />
            </td>
            <td style=" font-size: 17px;text-align: center">来源单据类型</td>
            <td style="text-align: center;">
                <select v-model="form.feSourceType" :disabled="true"
                    style="height: 50px; width: 90%; text-align: center;">
                    <option value="">无来源</option>
                    <option value="1">生产派工</option>
                    <option value="2">委外返工</option>
                    <option value="3">生产返工</option>
                    <option value="4">整单委外</option>
                    <option value="5">工序委外</option>
                </select>
            </td>
            <td style=" font-size: 17px;text-align: center">补料日期</td>
            <td style="text-align: center;"><input v-model="form.feDate" type="date"
                    style="height: 50px; width: 90%;text-align: center;" :disabled="true" />
            </td>
        </tr>
    </table>

    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>规格</th>
                <th>补料数量</th>
                <th>出库库管</th>
                <th>交货日期</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="dialogVisible = true" :disabled="true" />
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" /></td>
                <td><input v-model="item.pUnit" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.fePNum" type="text" style="height: 40px;width: 100%;text-align: center;"
                        @change="sumRPNum" :disabled="true" />
                </td>
                <td><input v-model="item.mName" type="text" style="height: 40px;width: 100%;text-align: center;"
                        @dblclick="dialogVisible1 = true" :disabled="true" />
                </td>
                <td><el-date-picker v-model="item.fePDeliveryDate" type="date"
                        style="height: 40px;width: 100%;text-align: center;" value-format="YYYY-MM-DD"
                        :disabled="true" />
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 合计 -->
    <el-form :model="form" lclass="demo-form-inline" :inline="true" style="margin-top: 40px;">
        <el-form-item label="数量合计">
            <el-input v-model="form.feNumTotal" style="width: 200px;" :disabled="true" />
        </el-form-item>
    </el-form>

</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'

const check = ref([])

const form = reactive({
    "feedingId": "",
    "feNumber": "",
    "feDocumentNumber": "",
    "feSourceType": "",
    "feNumTotal": "",
    "feOutState": "",
    "feDate": "",
    "office_Id": "",
    "user_Id": "",
})

//反填
const FanFeedPrduct = () => {
    axios.get(http.zblnb + '/sc/api/Feeding/FanFeedProduct?FeNumber=' + route.query.FeNumber)
        .then(res => {
            console.log(res.data.data);
            let d = res.data.data;
            form.feNumber = d.feNumber;
            form.feSourceType = d.feSourceType;
            form.feNumTotal = d.feNumTotal;
            form.feDate = d.feDate.substring(0, 10);
            check.value = d.feedingProducts;
            console.log(check.value)
        })
}

onMounted(() => {
    FanFeedPrduct();
})




</script>

<style></style>